<template>
  <Modal title="Edit Meetup Data" @cancel="cancel">
    <form @submit.prevent="submitForm">
      <TextInput id="title" label="Title" v-model="title" />
      <TextInput id="subtitle" label="Subtitle" v-model="subtitle" />
      <TextInput id="address" label="Address" v-model="address" />
      <TextInput id="imageUrl" label="Image URL" v-model="imageUrl" />
      <TextInput id="email" label="E-Mail" type="email" v-model="email" />
      <TextInput
        id="description"
        label="Description"
        controlType="textarea"
        v-model="description"
      />
    </form>
    <template v-slot:footer>
      <Button type="button" mode="outline" @click="cancel">Cancel</Button>
      <Button type="button" @click="submitForm">Save</Button>
    </template>
  </Modal>
</template>
<script>
import TextInput from "../ui/TextInput.vue";
import Button from "../ui/Button.vue";
import Modal from "../ui/Modal.vue";

export default {
  components: { TextInput, Button, Modal },
  data() {
    let title = "";
    let subtitle = "";
    let address = "";
    let email = "";
    let description = "";
    let imageUrl = "";

    return {
      title: title,
      subtitle: subtitle,
      address: address,
      email: email,
      description: description,
      imageUrl: imageUrl,
    };
  },
  methods: {
    submitForm() {
      this.$emit("save", {
        title: this.title,
        subtitle: this.subtitle,
        address: this.address,
        email: this.email,
        description: this.description,
        imageUrl: this.imageUrl,
      });
    },
    cancel() {
      this.$emit("cancel");
    },
  },
};
</script>

<style scoped>
form {
  width: 100%;
}
</style>
